import { useLoaderData, useSearchParams } from 'react-router-dom'
import dayjs from 'dayjs'

const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
import styles from '../css/ticket.module.css'
import { useMemo } from 'react'

function TicketInfo() {
  const loaderData = useLoaderData()

  const [sp] = useSearchParams()
  const dt = dayjs(Number(sp.get('date')) || sp.get('date'))
  const startTime = dt.format('M月D日 ') + weeks[dt.day()]

  const endTime = useMemo(() => {
    if (loaderData.info.isNextDay) {
      return dt.add(1, 'day').format('M月D日 ') + weeks[dt.day()]
    }
    return startTime
  }, [dt, loaderData.info.isNextDay, startTime])

  return (
    <div className={styles.ticketInfo}>
      <span className={styles.station}>{loaderData.info.startStation}</span>
      <span className={styles.tno}>{loaderData.info.trainNo}</span>
      <span className={styles.station}>{loaderData.info.endStation}</span>

      <span className={styles.time}>{loaderData.info.startTime}</span>
      <span>
        <span
          className="iconfont icon-gaotie1"
          style={{ color: '#1ba9ba', fontSize: '30px' }}
        ></span>
      </span>
      <span className={styles.time}>{loaderData.info.endTime}</span>

      <span>{startTime}</span>
      <span>{loaderData.info.timeTaken}</span>
      <span>{endTime}</span>
    </div>
  )
}

export default TicketInfo
